import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { SkuContent, Datum, RelateSku, fetchProDetailAPI } from '@/apis/proDetail'
// import { log } from 'console'
// type type_isopen = []
function useProduct() {
  const params = useParams()
  const id = params.id
  // console.log(id);
  const [isLoading, setLoading] = useState<boolean>(false)
  // 标题
  //   const [headers, setHeaders] = useState<HeaderItem["caption"]>()
  // 1.图片
  const [imgs, setImgs] = useState<Datum>({})
  // 2.简介内容
  // const [abstracts, setAbstracts] = useState<ProductDetail[]>([])
  // 3.规格
  const [isopenArr, setIsopenArr] = useState<SkuContent[]|undefined>([])
  // 4.参数
  // const [params, setParams] = useState<ProductDetail[]>([])
  // 5.相关产品
  const [relateProducts, setRelateProducts] = useState<RelateSku[]>([])
  
  
  useEffect(() => {
    const getProduct = async () => {
      try {
        setLoading(true)
        const res = await fetchProDetailAPI({ id })
        // console.log(res);
        // setHeaders(res.data.head[0].caption)
        setImgs(res.data.data[0])
        setIsopenArr(res.data.data[0].sku_content)
        setRelateProducts(res.data.relate_sku)
        setLoading(false)
      } catch (error) {
        throw new Error('fetch ProductAll error')
      }
    }
    getProduct()
  }, [id])
  // 暴露数据
  return {
    imgs, isopenArr, relateProducts, isLoading
  }
}

export { useProduct }
